<template>
	<view>

		<view class="select_menu">
			<view @click="selectZero" :class="selectIndex === 0 ? 'select' : '' " class="select_doing">
				交易中
			</view>
			<view @click="selectOne" :class="selectIndex === 1 ? 'select' : '' " class="select_finish">
				已完成
			</view>
		</view>

		<view class="result_list" v-show="selectIndex === 0">

			<view class="result_nav">
				<view class="nav_day">
					日期
				</view>
				<view class="nav_name">
					名称
				</view>
				<view class="nav_money">
					金/份额
				</view>
				<view class="nav_idea">
					操作
				</view>
			</view>
			<view class="result_list"></view>

			<view v-if="doingArray.length === 0" class="resultNull">
				空空如也哦~
			</view>

			<view class="result_swipe" v-for="(jijin, index) in doingArray" @click="detail(jijin.id)" :key=index>
				<swipe-action class="root" :options="options" :show="show" :index=index @button="regret"
					:disabled="jijin.isIdea === 1 ? false : false ">
					<view class="result">
						<view class="result_day">
							{{jijin.gmtModified.split('T')[0]}}
						</view>
						<view class="result_name">
							{{jijin.name}}
						</view>
						<view class="result_money">
							{{jijin.status === 3 ? jijin.buyNumber+'份' : jijin.buyMoney+'元' }}
						</view>
						<view class="result_idea" :class="jijin.status === 3 ? 'sell' : 'buy' ">
							{{jijin.status === 3 ? '卖出' : '买进' }}
						</view>
					</view>
				</swipe-action>
			</view>

		</view>



		<view class="result_list" v-show="selectIndex === 1">

			<view class="result_nav">
				<view class="nav_day">
					日期
				</view>
				<view class="nav_name">
					名称
				</view>
				<view class="nav_money">
					金/份额
				</view>
				<view class="nav_idea">
					操作
				</view>
			</view>
			<view class="result_list"></view>

			<view v-if="finialArray.length === 0" class="resultNull">
				空空如也哦~
			</view>

			<view class="result_swipe" v-for="(jijin, index) in finialArray" @click="detail(jijin.id)" :key=index>
				<view class="result">
					<view class="result_day" style="overflow: hidden;">
						{{jijin.gmtModified.split('T')[0]}}
					</view>
					<view class="result_name">
						{{jijin.name}}
					</view>
					<view class="finial_money">
						<view class="money">
							{{jijin.status === 4 ? jijin.sellMoney+'元' : jijin.buyMoney+'元' }}
						</view>

						<view class="number">
							{{jijin.buyNumber + '份'}}
						</view>
					</view>
					<view class="result_idea" :class="jijin.status === 4 ? 'sell' : 'buy' ">
						{{jijin.status === 4 ? '卖出' : '买进' }}
					</view>
				</view>
			</view>

			<uni-pagination 
			style="margin: 20rpx 0;padding: 0 20rpx;"
			:total="total" 
			:current="page"
			:pageSize="size"
			@change="pageChange"></uni-pagination>

		</view>


	</view>
</template>


<script>
	var _self
	import swipeAction from '@/components/zhouWei-swipeAction'

	export default {
		data() {
			return {
				show: false,
				selectIndex: 0,
				doingArray: [], // 正在进行的订单列表
				finialArray: [], // 交易完成的订单列表
				options: [{
						text: '撤回',
						style: {
							backgroundColor: '#dd524d'
						}
					},
					// {
					// 	text: '取消',
					// 	style: {
					// 		backgroundColor: '#007aff'
					// 	}
					// }
				],
				page: 1,
				total: 0,
				size: 8
			}
		},
		// 下拉刷新触发
		onPullDownRefresh() {
			if (this.selectIndex === 0) {
				this.selectZero()
			} else {
				this.selectOne()
			}
			// 停止当前页面下拉刷新
			uni.stopPullDownRefresh()
		},
		onLoad() {
			_self = this
			if (this.selectIndex === 0) {
				this.selectZero()
			} else {
				this.selectOne()
			}
		},
		onShow() {
			_self = this
			if (this.selectIndex === 0) {
				this.selectZero()
			} else {
				this.selectOne()
			}
		},
		methods: {
			tabChange(e) {
				console.log(e);
			},
			tabClick(e) {
				console.log(e);
			},
			// 翻页
			pageChange(e){
				this.page = e.current
				this.selectOne()
			},
			// 撤回触发
			regret(content) {
				this.sellIndex = content.index
				var jijin = this.doingArray[this.sellIndex] // 获取卖出对象
				this.sellId = jijin.id

				if (jijin.status === 3) {
					uni.showModal({
						title: '警告',
						content: '你确定要撤回卖出吗？',
						success: async function(res) {
							if (res.confirm) {
								uni.showLoading({
									title: '撤回中...',
									mask: false
								})
								var result = await _self.store.callbackSell(_self.sellId)
								if (result === 'ok') {
									// 清除页面列表数据
									_self.doingArray.splice(_self.sellIndex, 1)
									this.sellIndex = ''
									this.sellId = ''
								}
								uni.hideLoading()
								_self.selectZero()
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				} else {
					uni.showModal({
						title: '警告',
						content: '你确定要撤回买入吗？',
						success: async function(res) {
							if (res.confirm) {
								uni.showLoading({
									title: '撤回中...',
									mask: false
								})
								var result = await _self.store.callbackBuy(_self.sellId)
								if (result === 'ok') {
									// 清除页面列表数据
									_self.doingArray.splice(_self.sellIndex, 1)
									this.sellIndex = ''
									this.sellId = ''
								}
								uni.hideLoading()
								_self.selectZero()
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}

			},

			// 切换查询记录
			async selectZero() {
				this.selectIndex = 0
				// 获取正在进行中的订单
				uni.showLoading({
					title: '加载中...',
					mask: false
				})
				_self.doingArray = await this.store.getIsDoing()
				uni.hideLoading()
			},

			async selectOne() {
				this.selectIndex = 1

				// 获取交易完成的订单
				uni.showLoading({
					title: '加载中...',
					mask: false
				})
				var result  = await this.store.getIsDone(_self.page,_self.size)
				console.log(result)
				_self.finialArray = result.records
				_self.total = result.total
				uni.hideLoading()
			},
			detail(id) {
				// console.log('code为：'+code,name)
				// 跳转到详情页面
				// uni.navigateTo({
				// 	url: '../me/detail/detail?code='
				// 	+code+'&name='+name
				// })

				uni.navigateTo({
					url: '../order/order?orderId=' + id,
					animationType: 'pop-in',
					animationDuration: 200
				})
			}
		},
		components: {
			swipeAction,
		},

	}
</script>

<style>
	@import url("history.css");
</style>
